<template>
  <div class="form sign-up">
    <h2>立即注册</h2>
    <el-form
      :model="registerForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名手机" prop="username">
        <el-input v-model="registerForm.username"></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="captcha" class="verify">
        <el-input v-model="registerForm.captcha">
          <template slot="append">
            <el-button
              @click="getCaptchas"
              ref="postCode"
              :disabled="postCode.noCode"
            >{{postCode.noCode?postCode.text:'发送验证码'}}</el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="registerForm.nickname"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="registerForm.password"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="okPassword">
        <el-input type="password" v-model="registerForm.okPassword"></el-input>
      </el-form-item>
    </el-form>
    <el-button type="primary" class="btn" @click="registerUser">立即注册</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      postCode: {
        isCode: "", //验证码
        noCode: false, //禁止发送
        text: "" //验证码倒计时文字
      },
      registerForm: {
        nickname: "",
        username: "",
        captcha: "",
        password: "",
        okPassword: ""
      },
      rules: {
        nickname: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" }
        ],
        username: [
          { required: true, message: "请输入用户名/手机号", trigger: "blur" },
          {
            pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
            message: "手机号码格式错误",
            trigger: "blur"
          }
        ],
        captcha: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (value != this.postCode.isCode) {
                callback(new Error("验证码错误"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 16, message: "长度在 6 到 16 个字符", trigger: "blur" }
        ],
        okPassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (value != this.registerForm.password) {
                callback(new Error("两次输入密码不一致!"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ]
      }
    };
  },
  //传递注册表单元素
  mounted() {
    this.$emit("getEle", this.$refs.ruleForm);
  },
  methods: {
    //注册
    registerUser() {
      this.$refs.ruleForm.validate(isValid => {
        if (isValid) {
          //排除参数，使用剩余参数发送数据
          var { okPassword, ...data } = this.registerForm;
          this.$axios({
            url: "/accounts/register",
            method: "post",
            data
          }).then(res => {
            this.$message({
              message: "注册成功，去登录",
              type: "success"
            });
            this.$emit("toLogin");
          });
        }
      });
    },
    //获取验证码
    getCaptchas() {
      var reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
      if (reg.test(this.registerForm.username)) {
        this.$axios({
          url: "/captchas",
          method: "post",
          data: {
            tel: this.registerForm.username
          }
        }).then(res => {
          this.postCode.isCode = res.data.code;
          this.$message({
            message: "验证码：" + this.postCode.isCode,
            type: "success",
            duration: 5000
          });
          this.Countdown();
        });
      } else {
        this.$message.error("请输入手机号");
      }
    },
    //验证码倒计时完成后获取
    Countdown() {
      var time = 60;
      var timeID = setInterval(() => {
        time--;
        if (time > 0) {
          this.postCode.text = `${time}秒后可重发`;
          this.postCode.noCode = true;
        } else {
          time = 60;
          this.postCode.text = "发送验证码";
          this.postCode.noCode = false;
          clearInterval(timeID);
        }
      }, 1000);
    }
  }
};
</script>

<style lang="less" scoped>
.form {
  position: relative;
  width: 640px;
  height: 100%;
  transition: -webkit-transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
  padding: 30px 20px 0;
  display: flex;
  flex-direction: column;
  .verify {
    display: flex;
    /deep/.el-form-item__content {
      margin: 0 !important;
      display: flex;
      flex: 1;
    }
    .el-button {
      &:hover {
        background: none;
        color: none;
      }
    }
  }
  h2 {
    width: 100%;
    font-size: 26px;
    text-align: center;
    margin: 20px 0;
  }
  .btn {
    width: 200px;
    margin: 20px auto;
  }
  .demo-ruleForm {
    width: 400px;
    margin: 0 auto;
  }
  .forgot-pass {
    margin: 15px 0;
    text-align: center;
    font-size: 12px;
    color: #cfcfcf;
  }

  .forgot-pass a {
    color: #cfcfcf;
  }
}
</style>